<script setup lang="ts">
// 1. 定义 Props 接收父组件传递的数据
// defineProps<{
//   // key 属性名，value 属性的类型
//   food?: string
//   drink?: string
//   price?:number
// }>()

// withDefaults 设置默认值
// 获取 withDefaults 或者 defineProps的返回值 ，即可 在代码中 获取 props 的数据
// props是一个对象，可以通过点语法获取内部的数据
const props = withDefaults(
  defineProps<{
    // key 属性名，value 属性的类型
    food?: string
    drink?: string
    price?: number
  }>(),
  {
    food: '干炒牛河',
    drink: '沙茶酱',
    price: 20
  }
)
setTimeout(() => {
  console.log(props)
}, 3000)

//准备回调函数
const emit = defineEmits<{
  (e: 'changeFood', newFood: string): void
  (e: 'changeDrink', newInfo: string): void
  (e: 'discount', sale: number): void
}>()
</script>

<template>
  <div class="son">
    <h2>我是子组件</h2>
    <p>food:{{ food }} <button @click="emit('changeFood', '黄焖鸡米饭')">触发回调函数</button></p>
    <p>drink:{{ drink }} <button @click="emit('changeDrink', '🧊')">加冰</button></p>
    <!-- 子组件无法修改 Props 的值 只读的 -->
    <p>price:{{ price }} <button @click="emit('discount', 0.5)">打折</button></p>
  </div>
</template>

<style scoped>
.son {
  padding: 10px;
  background-color: lightgreen;
}
h2 {
  color: white;
}
</style>
